<template>
	<div>



		<van-row class='buttons'>
			<van-col span="12">
				<van-button type="warning" size="large" @click="showPopup()">更改SUP名称</van-button>

				<!-- <el-drawer size="60%" title="更改类名" :visible.sync="drawer" 
			:direction="direction" :with-header="false">
				<el-input style="padding: 10px;" v-model="new_class_name" placeholder="请输入更换后的名称"></el-input>
				<el-button type="primary" v-on:click='ch_class_name()' style="display: block; width: 80%; margin: 10px auto;">
					确认更换类名</el-button>
			</el-drawer> -->

				<van-popup v-model="show" closeable position="top" :style="{ height: '50%' }">

					<van-cell title="更换spu名称" />

					<el-input style="padding: 10px;" v-model="new_spu_name" placeholder="请输入更换后的名称"></el-input>
					<el-button type="primary" v-on:click='update_spu()'
						style="display: block; width: 80%; margin: 10px auto;">点击更换</el-button>


					<div style="height: 50px;width: 100%;"></div>
				</van-popup>


			</van-col>

			<van-col span="12">
				<van-button type="danger" size="large" @click="del_spu()">删除SPU</van-button>

			</van-col>

		</van-row>

	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import {
		del_spu_url,
		update_spu_url

	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: ['spu_id', 'can_del_id'],
		data() {
			return {
				show: false,
				direction: 'ttb',
				now_spu_id: this.spu_id,
				now_can_del_id: this.can_del_id,
				new_spu_name: ''
			}
		},
		methods: {

			showPopup() {
				// console.log('xxxx')
				if (this.now_spu_id == '') {
					Toast('必须选择一个类')
					return
				}
				this.show = true

			},


			del_spu() {

				if (this.now_can_del_id == '') {
					Toast('必须选择一个SPU或是当前SPU下无属性')
					return
				}


				this.$axios({
					method: 'POST',
					url: del_spu_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						spu_id: this.now_can_del_id,

					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						this.$notify({
							type: 'success',
							message: response.data.resultBody
						});
						this.$emit('deleteSpuSuccess', 'true')

					} else {

						this.$notify({
							type: 'error',
							message: '危险删除，该类已经在别处引用：' + response.data.errorMsg
						});
					}
					// this.updateclass = false
					// location.reload();
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			update_spu() {

				// console.log(this.new_spu_name)
				this.show = false
				this.$axios({
					method: 'POST',
					url: update_spu_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						spu_id: this.now_spu_id,
						spu_name: this.new_spu_name,

					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						this.$notify({
							type: 'success',
							message: response.data.resultBody
						});
						this.$emit('updateSpuSuccess', 'true')
						this.show = false

					} else {

						this.$notify({
							type: 'error',
							message: '危险删除，该类已经在别处引用：' + response.data.errorMsg
						});
					}
					// this.updateclass = false
					// location.reload();
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},



		},
		computed: {},
		watch: {
			spu_id: function(val, oldVal) {
				// console.log('new: %s, old: %s', val, oldVal)

				this.now_spu_id = val
			},

			can_del_id: function(val, oldVal) {
				// console.log('new: %s, old: %s', val, oldVal)

				this.now_can_del_id = val
			},

		},
		created() {},
		mounted() {

		},
	}
</script>

<style scoped lang="less">
	.buttons {

		width: 100%;
		position: fixed;
		bottom: 50px;
	}
</style>
